<template>
    <div class="app-container org">
      <el-card style="width: 100%">
        <!-- 搜索条件盒子 -->
        <p class="pinformation">搜索条件</p>
        <el-form :model="queryParams" ref="queryRef" label-width="80">
          <el-row>
            <el-col :span="4">
              <el-form-item label="文件名称：" prop="fileMc">
                <el-input
                  v-model="queryParams.fileMc"
                  placeholder="请输入文件名称"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="类型：" prop="fileType">
                <el-select
                  clearable
                  v-model="queryParams.fileType"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in sys_file_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="parseInt(dict.value)"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="下载时间：">
                <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                style="width: 100%;"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button type="success" icon="Search" @click="handleQuery"
                  >搜索</el-button
                >
                <div class="resetBtn" style="margin-left: 6px">
                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
  
        <el-row>
          <p class="pinformation" style="margin-top: 8.5px">借阅记录列表</p>
          <p class="totalStyle" style="margin-right: 20px; margin-top: 6px">
            共 {{ total }} 条数据
          </p>
        </el-row>
  
        <el-table
          class="business"
          v-loading="loading"
          :data="fileTable"
          ref="mainTableRef"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="文件类型"
            align="center"
            prop="fileTypeName"
            width="180"
          />
          <el-table-column label="名称" align="center" prop="fileMc" />
          <el-table-column label="文件" align="center">
            <template #default="scope">
              <div
                v-for="(item, index) in scope.row.fileList"
                :key="index"
              >
                {{ item.fileName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="下载人"
            align="center"
            prop="recordUserName"
            width="160"
          />
          <el-table-column
            label="下载时间"
            align="center"
            prop="recordTime"
            width="160"
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
    </div>
  </template>
  
  <script setup name="FileDownload">
  import {
    listJlFile,
  } from "@/api/file/fileAuth";
  
  const { proxy } = getCurrentInstance();
  
  const { sys_file_type } = proxy.useDict("sys_file_type");
  const dateRange = ref([]);
  const queryParams = ref({ pageSize: 10, pageNum: 1 });
  const fileTable = ref([]);
  const total = ref(0);
  const loading = ref(false);
  
  const getList = () => {
    loading.value = true;
    listJlFile(proxy.addDateRange(queryParams.value, dateRange.value)).then(
      (res) => {
        fileTable.value = res.rows;
        total.value = res.total;
        loading.value = false;
      }
    );
  };
  
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  };
  
  const resetQuery = () => {
    proxy.resetForm("queryRef");
    dateRange.value = [];
    handleQuery();
  };
  
  getList();
  
  watch(
    () => total.value,
    () => {
      if (total.value) {
        heightParams.value = [{ tableName: "main", bottomHeight: 73 }];
      } else {
        heightParams.value = [{ tableName: "main", bottomHeight: 21 }];
      }
      getTableHeight();
    }
  );
  
  const heightParams = ref([{ tableName: "main", bottomHeight: 21 }]);
  
  function getTableHeight() {
    proxy.adaptiveHeight(proxy, heightParams.value);
  }
  onMounted(() => {
    nextTick(() => {
      getTableHeight();
      window.addEventListener("resize", getTableHeight);
    });
  });
  onUpdated(() => {
    nextTick(function () {
      getTableHeight();
    });
  });
  onBeforeUnmount(() => {
    window.removeEventListener("resize", getTableHeight);
  });
  </script>
  